<template>
	<view>
		<view class="u-p-30">
			<view class="u-r-20"
				style="background: linear-gradient( 170deg, #FFEEEB 0%, #FFFFFF 100%);padding: 30rpx 20rpx;">
				<view class="u-f-24">我的积分</view>
				<u-gap height="50rpx"></u-gap>
				<view style="font-size: 88rpx;font-weight: bold;color: #141936;">{{user.score}}</view>
				<u-gap height="32rpx"></u-gap>
				<view style="border: 1rpx solid #ECECEC;"></view>
				<view
					style="background: linear-gradient( 180deg, #FFFFFF 0%, #FFEEEB 100%);color: #EA4D44;font-size: 28rpx;">
					<u-gap height="20rpx"></u-gap>
					{{recharge_rule}}
				</view>
			</view>
			<u-gap height="30rpx"></u-gap>
			<view class="u-f-32 u-bold">活动通知</view>
			<u-gap height="20rpx"></u-gap>
			<view class="grid">
				<view @click="selected(item.id)" :class="item.id==id?'acted':'act'"
					style="padding: 30rpx 20rpx 20rpx;border-radius: 20rpx 20rpx 20rpx 0rpx;width: 200rpx;height: 218rpx;"
					v-for="(item,index) in list" :key="index">
					<view style="color: #03031C;" class="u-f-26 u-bold">充值金额</view>
					<view class="u-m-t-9 u-f-26" style="color: #9F9C95;">赠送{{item.retun}}积分</view>
					<view class="u-m-t-24" style="color: #EA4D44;font-weight: bold;">
						<text style="font-size: 28rpx;">￥</text>
						<text style="font-size: 45rpx;">{{item.price}}</text>
					</view>
				</view>
			</view>
			<u-gap height="30rpx"></u-gap>
			<view class="u-f-32 u-bold">充值方式</view>
			<u-gap height="20rpx"></u-gap>
			<view class="u-bg-fff u-r-20 u-p-20"
				style="box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.06);border: 1rpx solid #F7F7F8;">
				<view class="u-m-l-6 u-f-26 u-bold ">香港地区</view>
				<u-gap height="30rpx"></u-gap>
				<view class="u-flex-y-center u-flex-between u-m-b-40" @click="paymethod=0">
					<view class="u-flex-y-center">
						<image src="../../static/p_wx.png" style="width: 40rpx;height: 40rpx;"></image>
						<view class="u-m-l-16 u-f-28">微信支付</view>
					</view>
					<image src="../../static/check.png" style="width: 34rpx;height: 34rpx;" v-if="paymethod!=0"></image>
					<image src="../../static/checked.png" style="width: 34rpx;height: 34rpx;" v-if="paymethod==0">
					</image>
				</view>
				<!-- #ifdef APP -->
				<view class="u-flex-y-center u-flex-between u-m-b-40" @click="paymethod=1">
					<view class="u-flex-y-center">
						<image src="../../static/p_zfb.png" style="width: 40rpx;height: 40rpx;"></image>
						<view class="u-m-l-16 u-f-28">支付宝支付</view>
					</view>
					<image :src="paymethod!=1?'../../static/check.png':'../../static/checked.png'"
						style="width: 34rpx;height: 34rpx;"></image>
				</view>
				<view class="u-flex-y-center u-flex-between u-m-b-40" @click="paymethod=2">
					<view class="u-flex-y-center">
						<image src="../../static/p_bdt.png" style="width: 40rpx;height: 40rpx;"></image>
						<view class="u-m-l-16 u-f-28">八达通</view>
					</view>
					<image :src="paymethod!=2?'../../static/check.png':'../../static/checked.png'"
						style="width: 34rpx;height: 34rpx;"></image>
				</view>
				<view class="u-flex-y-center u-flex-between u-m-b-40" @click="paymethod=3">
					<view class="u-flex-y-center">
						<image src="../../static/p_xyk.png" style="width: 40rpx;height: 40rpx;"></image>
						<view class="u-m-l-16 u-f-28">信用卡</view>
					</view>
					<image :src="paymethod!=3?'../../static/check.png':'../../static/checked.png'"
						style="width: 34rpx;height: 34rpx;"></image>
				</view>
				<!-- #endif -->
				<!-- #ifdef APP -->
				<u-gap height="40rpx"></u-gap>
				<view class="u-m-l-6 u-f-26 u-bold ">欧州地区</view>
				<u-gap height="30rpx"></u-gap>
				<view class="u-flex-y-center u-flex-between u-m-b-40" @click="paymethod=4">
					<view class="u-flex-y-center">
						<image src="../../static/p_visa.png" style="width: 40rpx;height: 40rpx;"></image>
						<view class="u-m-l-16 u-f-28">Visa</view>
					</view>
					<image :src="paymethod!=4?'../../static/check.png':'../../static/checked.png'"
						style="width: 34rpx;height: 34rpx;"></image>
				</view>
				<view class="u-flex-y-center u-flex-between u-m-b-40" @click="paymethod=5">
					<view class="u-flex-y-center">
						<image src="../../static/p_mc.png" style="width: 40rpx;height: 40rpx;"></image>
						<view class="u-m-l-16 u-f-28">MasterCard</view>
					</view>
					<image :src="paymethod!=5?'../../static/check.png':'../../static/checked.png'"
						style="width: 34rpx;height: 34rpx;"></image>
				</view>
				<view class="u-flex-y-center u-flex-between u-m-b-40" @click="paymethod=6">
					<view class="u-flex-y-center">
						<image src="../../static/p_py.png" style="width: 40rpx;height: 40rpx;"></image>
						<view class="u-m-l-16 u-f-28">Paypal</view>
					</view>
					<image :src="paymethod!=6?'../../static/check.png':'../../static/checked.png'"
						style="width: 34rpx;height: 34rpx;"></image>
				</view>
				<view class="u-flex-y-center u-flex-between u-m-b-40" @click="paymethod=7">
					<view class="u-flex-y-center">
						<image src="../../static/p_ae.png" style="width: 40rpx;height: 40rpx;"></image>
						<view class="u-m-l-16 u-f-28">American Express</view>
					</view>
					<image :src="paymethod!=7?'../../static/check.png':'../../static/checked.png'"
						style="width: 34rpx;height: 34rpx;"></image>
				</view>
				<view class="u-flex-y-center u-flex-between u-m-b-40" @click="paymethod=8">
					<view class="u-flex-y-center">
						<image src="../../static/p_yl.png" style="width: 40rpx;height: 40rpx;"></image>
						<view class="u-m-l-16 u-f-28">银联</view>
					</view>
					<image :src="paymethod!=8?'../../static/check.png':'../../static/checked.png'"
						style="width: 34rpx;height: 34rpx;"></image>
				</view>
				<!-- #endif -->
			</view>
		</view>
		
		<u-gap height="150rpx"></u-gap>
		<view style="padding: 10rpx 30rpx;position: fixed;bottom: 0;width: 100%;background-color: #fff;">
			<view class="appBtn" @click="submit">立即充值</view>
			<!-- <image src="/static/down_btn.png" style="width:100%;height: 66rpx;"></image> -->
			<!-- <view class="u-c-fff u-f-26 u-p-r" style=" top: -52rpx;left: 46rpx;">立即充值</view> -->
		</view>
	</view>
</template>


<script>
	export default {

		data() {
			return {
				user: {},
				list: [],
				id: 0,
				paymethod: 0,
				recharge_rule: ''

			}
		},
		onLoad() {


		},
		onShow() {

			this.getUser()
			this.getList()
		},

		methods: {
			selected(e) {
				this.id = e
			},
			async submit() {
				let _this = this
				let res = await uni.$u.http.post('order/rechargeSubmit', {
					id: this.id
				});
				let result = await uni.$u.http.post('Order/pay', {
					order_no: res.order_no,
					type: 2
				})
				uni.requestPayment({
					"provider": "wxpay",
					timeStamp: result.timeStamp,
					nonceStr: result.nonceStr,
					package: result.package,
					signType: result.signType,
					paySign: result.paySign,
					success(res2) {
						uni.hideLoading()
						uni.showToast({
							title: '支付成功',
							icon: 'none'
						})
						_this.getUser()
					},
					fail(e) {
						uni.hideLoading()
						uni.showToast({
							title: '支付失败,请重新支付',
							icon: 'none'
						})
					}
				})
			},
			async getList() {
				let res = await uni.$u.http.post('order/recharge');
				this.list = res.list
				this.recharge_rule = res.recharge_rule
			},
			async getUser() {
				let res = await uni.$u.http.post('user/index');
				this.user = res


			},
		}
	}
</script>

<style>
	page {
		background: #FFFFFF;
	}

	.grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 20rpx;
	}

	.acted {
		background: rgba(234, 77, 68, 0.1);
		/* border: 2rpx solid rgba(234, 77, 68, 1); */
		border-image: linear-gradient(135deg, rgba(246, 151, 146, 1), rgba(234, 77, 68, 1)) 2 2;
	}

	.act {
		background: #F8F9FD;
	}
</style>